React Suspense: Ma'lumotlarni yuklash va kodni bo'lish bo'yicha to'liq qo'llanma

React Suspense — bu React 16.6 versiyasida taqdim etilgan kuchli xususiyat bo'lib, u ma'lumotlar yuklanishi yoki kodning yuklab olinishi kabi biror narsani kutish paytida komponent renderini "to'xtatib turish" imkonini beradi. Bu yuklanish holatlarini boshqarishning deklarativ usulini ta'minlaydi va asinxron operatsiyalarni silliq boshqarish orqali foydalanuvchi tajribasini yaxshilaydi. Ushbu qo'llanma sizni Suspense tushunchalari, uni qo'llash holatlari va React ilovalaringizda qanday tatbiq etish bo'yicha amaliy misollar bilan tanishtiradi.

React Suspense nima?

Suspense — bu boshqa komponentlarni o'rab turuvchi React komponenti bo'lib, ushbu komponentlar promise'ning bajarilishini kutayotgan paytda zaxira UI (masalan, yuklanish spinneri) ni ko'rsatishga imkon beradi. Bu promise quyidagilar bilan bog'liq bo'lishi mumkin:

• Ma'lumotlarni yuklash: API'dan ma'lumotlar olinishini kutish.
• Kodni bo'lish: JavaScript modullarining yuklab olinishi va tahlil qilinishini kutish.

Suspense'dan oldin, yuklanish holatlarini boshqarish ko'pincha murakkab shartli renderlash va asinxron operatsiyalarni qo'lda boshqarishni o'z ichiga olardi. Suspense bu jarayonni deklarativ yondashuvni taqdim etish orqali soddalashtiradi, kodingizni toza va qo'llab-quvvatlash uchun osonroq qiladi.

Asosiy tushunchalar

• Suspense Komponenti: <Suspense> komponentining o'zi. U fallback prop'ini qabul qiladi, bu esa o'ralgan komponentlar to'xtatilgan vaqtda ko'rsatiladigan UI'ni belgilaydi.
• React.lazy(): Komponentlarni dinamik ravishda import qilish orqali kodni bo'lish imkonini beruvchi funksiya. U komponent yuklanganda bajariladigan Promise'ni qaytaradi.
• Promise integratsiyasi: Suspense Promise'lar bilan uzluksiz integratsiyalashadi. Komponent hali bajarilmagan Promise'dan ma'lumotlarni render qilishga harakat qilganda, u "to'xtatiladi" va zaxira UI'ni ko'rsatadi.

Qo'llash holatlari

1. Suspense yordamida ma'lumotlarni yuklash

Suspense'ni qo'llashning asosiy holatlaridan biri bu ma'lumotlarni yuklashni boshqarishdir. Shartli renderlash yordamida yuklanish holatlarini qo'lda boshqarish o'rniga, siz Suspense'dan foydalanib, ma'lumotlar kelishini kutish paytida yuklanish indikatorini deklarativ tarzda ko'rsatishingiz mumkin.

Misol: API'dan foydalanuvchi ma'lumotlarini yuklash

Aytaylik, sizda API'dan olingan foydalanuvchi ma'lumotlarini ko'rsatadigan komponent bor. Suspense'siz sizning kodingiz quyidagicha bo'lishi mumkin:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>;
  }

  if (error) {
    return <p>Xatolik: {error.message}</p>;
  }

  if (!user) {
    return <p>Foydalanuvchi ma'lumotlari mavjud emas.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Bu kod ishlaydi, lekin u bir nechta holat o'zgaruvchilari (isLoading, error, user) va shartli renderlash mantig'ini boshqarishni o'z ichiga oladi. Suspense bilan siz bu jarayonni SWR yoki TanStack Query (sobiq React Query) kabi Suspense bilan uzluksiz ishlashga mo'ljallangan ma'lumotlar yuklash kutubxonasi yordamida soddalashtirishingiz mumkin.

SWR'ni Suspense bilan qanday ishlatish mumkinligiga misol:

import React from 'react';
import useSWR from 'swr';

// Oddiy fetcher funksiyasi
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Xatolik: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

Ushbu misolda:

• Foydalanuvchi ma'lumotlarini yuklash uchun useSWR dan foydalanamiz. suspense: true opsiyasi SWR'ga ma'lumotlar hali mavjud bo'lmasa, Promise tashlashini bildiradi.
• UserProfile komponenti yuklanish yoki xatolik holatlarini aniq boshqarishi shart emas. U shunchaki ma'lumotlar mavjud bo'lganda ularni render qiladi.
• <Suspense> komponenti SWR tomonidan tashlangan Promise'ni ushlaydi va ma'lumotlar yuklanayotgan vaqtda zaxira UI'ni (<p>Foydalanuvchi ma'lumotlari yuklanmoqda...</p>) ko'rsatadi.

Bu yondashuv komponent mantig'ini soddalashtiradi va ma'lumotlarni yuklash haqida fikr yuritishni osonlashtiradi.

Ma'lumotlarni yuklash bo'yicha global mulohazalar:

Global auditoriya uchun ilovalar yaratayotganda, quyidagilarni hisobga oling:

• Tarmoq kechikishi: Turli geografik joylashuvdagi foydalanuvchilar har xil tarmoq kechikishiga duch kelishi mumkin. Suspense uzoq serverlardan ma'lumotlar yuklanayotgan vaqtda yuklanish indikatorlarini ko'rsatish orqali yaxshiroq foydalanuvchi tajribasini ta'minlashga yordam beradi. Ma'lumotlaringizni foydalanuvchilarga yaqinroq joyda keshda saqlash uchun Kontent Yetkazib Berish Tarmog'i (CDN) dan foydalanishni o'ylab ko'ring.
• Ma'lumotlarni mahalliylashtirish: API'ingiz ma'lumotlarni mahalliylashtirishni qo'llab-quvvatlashiga ishonch hosil qiling, bu sizga ma'lumotlarni foydalanuvchining afzal ko'rgan tili va formatida taqdim etish imkonini beradi.
• API mavjudligi: Barqaror foydalanuvchi tajribasini ta'minlash uchun turli mintaqalardan API'laringizning mavjudligi va unumdorligini kuzatib boring.

2. React.lazy() va Suspense yordamida kodni bo'lish

Kodni bo'lish — bu ilovangizni kichikroq qismlarga bo'lish usuli bo'lib, ularni talabga qarab yuklash mumkin. Bu, ayniqsa, katta va murakkab loyihalar uchun ilovangizning dastlabki yuklanish vaqtini sezilarli darajada yaxshilashi mumkin.

React komponentlarni kodga bo'lish uchun React.lazy() funksiyasini taqdim etadi. Suspense bilan birgalikda ishlatilganda, u komponent yuklab olinishi va tahlil qilinishini kutish paytida zaxira UI'ni ko'rsatishga imkon beradi.

Misol: Komponentni kechiktirib yuklash (lazy loading)

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Yuklanmoqda...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

Ushbu misolda:

• OtherComponent'ni dinamik ravishda import qilish uchun React.lazy() dan foydalanamiz. Bu komponent yuklanganda bajariladigan Promise'ni qaytaradi.
• Biz <OtherComponent /> ni <Suspense> bilan o'rab, fallback prop'ini taqdim etamiz.
• OtherComponent yuklanayotgan vaqtda zaxira UI (<p>Yuklanmoqda...</p>) ko'rsatiladi. Komponent yuklangandan so'ng, u zaxira UI o'rnini egallaydi.

Kodni bo'lishning afzalliklari:

• Dastlabki yuklanish vaqtining yaxshilanishi: Faqat dastlabki ko'rinish uchun zarur bo'lgan kodni yuklash orqali, siz ilovangizning interaktiv holatga kelishi uchun ketadigan vaqtni qisqartirishingiz mumkin.
• Paket hajmining qisqarishi: Kodni bo'lish ilovangizning JavaScript paketining umumiy hajmini kamaytirishga yordam beradi, bu esa, ayniqsa, past tezlikdagi internet ulanishlarida unumdorlikni oshirishi mumkin.
• Yaxshiroq foydalanuvchi tajribasi: Tezroq dastlabki yuklanishni ta'minlash va kodni faqat kerak bo'lganda yuklash orqali siz silliqroq va sezgirroq foydalanuvchi tajribasini yaratishingiz mumkin.

Kodni bo'lishning ilg'or usullari:

• Marshrutga asoslangan kodni bo'lish: Ilovangizni marshrutlarga qarab bo'ling, shunda har bir marshrut faqat o'ziga kerakli kodni yuklaydi. Bunga React Router kabi kutubxonalar yordamida osonlik bilan erishish mumkin.
• Komponentga asoslangan kodni bo'lish: Alohida komponentlarni, ayniqsa katta yoki kam ishlatiladigan komponentlarni alohida qismlarga bo'ling.
• Dinamik importlar: Komponentlaringiz ichida foydalanuvchi harakatlari yoki boshqa shartlarga asoslanib, kodni talabga qarab yuklash uchun dinamik importlardan foydalaning.

3. Concurrent Mode va Suspense

Suspense — bu React'ning Concurrent Mode'i uchun asosiy tarkibiy qism bo'lib, u React'ga bir vaqtning o'zida bir nechta vazifalar ustida ishlash imkonini beruvchi yangi xususiyatlar to'plamidir. Concurrent Mode React'ga muhim yangilanishlarni ustuvorlashtirish, uzoq davom etadigan vazifalarni to'xtatish va ilovangizning sezgirligini oshirish imkonini beradi.

Concurrent Mode va Suspense yordamida React quyidagilarni qila oladi:

• Barcha ma'lumotlar mavjud bo'lishidan oldin komponentlarni render qilishni boshlash: React komponentni render qilishni, uning ba'zi ma'lumotlariga bog'liqliklar hali yuklanayotgan bo'lsa ham boshlashi mumkin. Bu React'ga qisman UI'ni tezroq ko'rsatish imkonini beradi va ilovangizning seziladigan unumdorligini oshiradi.
• Renderlashni to'xtatish va davom ettirish: Agar React komponentni render qilayotganda yuqori ustuvorlikdagi yangilanish kelsa, u renderlash jarayonini to'xtatib, yuqori ustuvorlikdagi yangilanishni bajarishi va keyin komponentni render qilishni davom ettirishi mumkin.
• Asosiy oqimni bloklashdan saqlanish: Concurrent Mode React'ga asosiy oqimni bloklamasdan uzoq davom etadigan vazifalarni bajarishga imkon beradi, bu esa UI'ning qotib qolishining oldini oladi.

Concurrent Mode'ni yoqish uchun React 18'dagi createRoot API'sidan foydalanishingiz mumkin:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Root yaratish.
root.render(<App />);

Suspense'dan foydalanish bo'yicha eng yaxshi amaliyotlar

• Ma'lumotlarni yuklash kutubxonasidan foydalaning: SWR yoki TanStack Query kabi Suspense bilan uzluksiz ishlashga mo'ljallangan ma'lumotlar yuklash kutubxonalaridan foydalanishni o'ylab ko'ring. Bu kutubxonalar keshlash, avtomatik qayta urinishlar va xatoliklarni boshqarish kabi xususiyatlarni taqdim etadi, bu esa ma'lumotlarni yuklash mantig'ini soddalashtirishi mumkin.
• Mazmunli zaxira UI taqdim eting: Zaxira UI biror narsa yuklanayotganligini aniq ko'rsatishi kerak. Vizual jozibador va ma'lumot beruvchi yuklanish tajribasini yaratish uchun spinnerlar, progress barlar yoki skelet yuklagichlardan foydalaning.
• Xatoliklarni silliq boshqaring: Renderlash paytida yuzaga keladigan xatoliklarni ushlash uchun Error Boundaries'dan foydalaning. Bu butun ilovangizning ishdan chiqishini oldini oladi va yaxshiroq foydalanuvchi tajribasini ta'minlaydi.
• Kodni bo'lishni optimallashtiring: Ilovangizning dastlabki yuklanish vaqtini qisqartirish uchun kodni bo'lishdan strategik foydalaning. Katta yoki kam ishlatiladigan komponentlarni aniqlang va ularni alohida qismlarga bo'ling.
• Suspense tatbiqini sinovdan o'tkazing: Suspense tatbiqining to'g'ri ishlashiga va ilovangiz yuklanish holatlari va xatoliklarni silliq boshqarayotganiga ishonch hosil qilish uchun uni sinchkovlik bilan sinovdan o'tkazing.

Error Boundaries yordamida xatoliklarni boshqarish

Suspense *yuklanish* holatini boshqarsa, Error Boundaries renderlash paytidagi *xatolik* holatini boshqaradi. Error Boundaries — bu o'zining bolalik komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlaydigan, ushbu xatolarni qayd etadigan va butun komponentlar daraxtini ishdan chiqarmasdan zaxira UI'ni ko'rsatadigan React komponentlaridir.

Quyida Error Boundary'ning oddiy misoli keltirilgan:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Keyingi renderda zaxira UI ko'rsatilishi uchun holatni yangilang.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Siz xatoni xatoliklar haqida xabar beruvchi xizmatga ham yozishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return <h1>Nimadir noto'g'ri bajarildi.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundary'dan foydalanish uchun uni xatolik chiqarishi mumkin bo'lgan komponent atrofiga o'rang:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Suspense va Error Boundaries'ni birlashtirib, siz ham yuklanish holatlarini, ham xatoliklarni silliq boshqaradigan mustahkam va chidamli ilova yaratishingiz mumkin.

Haqiqiy hayotdan misollar

Quyida Suspense foydalanuvchi tajribasini yaxshilash uchun qanday ishlatilishi mumkinligiga oid bir nechta haqiqiy hayotiy misollar keltirilgan:

• Elektron tijorat veb-sayti: Mahsulot tafsilotlari yoki rasmlarini yuklash paytida yuklanish indikatorlarini ko'rsatish uchun Suspense'dan foydalaning. Bu foydalanuvchining ma'lumotlar yuklanishini kutayotganda bo'sh sahifani ko'rishining oldini oladi.
• Ijtimoiy media platformasi: Foydalanuvchi sahifani pastga aylantirganda sharhlar yoki postlarni kechiktirib yuklash uchun Suspense'dan foydalaning. Bu sahifaning dastlabki yuklanish vaqtini yaxshilashi va yuklab olinishi kerak bo'lgan ma'lumotlar miqdorini kamaytirishi mumkin.
• Boshqaruv paneli ilovasi: Jadvallar yoki grafiklar uchun ma'lumotlarni yuklash paytida yuklanish indikatorlarini ko'rsatish uchun Suspense'dan foydalaning. Bu silliqroq va sezgirroq foydalanuvchi tajribasini ta'minlashi mumkin.

Misol: Xalqaro elektron tijorat platformasi

Dunyo bo'ylab mahsulotlar sotadigan xalqaro elektron tijorat platformasini ko'rib chiqaylik. Platforma Suspense va React.lazy() dan foydalanib, quyidagilarni amalga oshirishi mumkin:

• Mahsulot rasmlarini kechiktirib yuklash: Mahsulot rasmlarini faqat ko'rish oynasida ko'ringanda yuklash uchun React.lazy() dan foydalaning. Bu mahsulotlar ro'yxati sahifasining dastlabki yuklanish vaqtini sezilarli darajada qisqartirishi mumkin. Haqiqiy rasm yuklanayotganda o'rnini bosuvchi rasmni ko'rsatish uchun har bir kechiktirib yuklangan rasmni <Suspense fallback={<img src="placeholder.png" alt="Yuklanmoqda..." />}> bilan o'rang.
• Mamlakatga xos komponentlarni kodga bo'lish: Agar platformada mamlakatga xos komponentlar (masalan, valyutani formatlash, manzil kiritish maydonlari) mavjud bo'lsa, bu komponentlarni faqat foydalanuvchi ma'lum bir mamlakatni tanlaganda yuklash uchun React.lazy() dan foydalaning.
• Mahalliylashtirilgan mahsulot tavsiflarini yuklash: Foydalanuvchining afzal ko'rgan tilida mahsulot tavsiflarini yuklash uchun SWR kabi ma'lumotlar yuklash kutubxonasini Suspense bilan birgalikda ishlating. Mahalliylashtirilgan tavsiflar yuklanayotganda yuklanish indikatorini ko'rsating.

Xulosa

React Suspense — bu React ilovalaringizning foydalanuvchi tajribasini sezilarli darajada yaxshilaydigan kuchli xususiyatdir. Yuklanish holatlarini va kodni bo'lishni boshqarishning deklarativ usulini taqdim etish orqali Suspense kodingizni soddalashtiradi va asinxron operatsiyalar haqida fikr yuritishni osonlashtiradi. Kichik shaxsiy loyiha yoki yirik korporativ ilova yaratayotgan bo'lsangiz ham, Suspense sizga silliqroq, sezgirroq va unumdorroq foydalanuvchi tajribasini yaratishga yordam beradi.

Suspense'ni ma'lumotlar yuklash kutubxonalari va kodni bo'lish usullari bilan integratsiya qilib, siz React'ning Concurrent Mode'ining to'liq salohiyatini ochishingiz va haqiqatan ham zamonaviy va jozibador veb-ilovalarni yaratishingiz mumkin. Suspense'ni o'zlashtiring va React dasturlashingizni keyingi bosqichga olib chiqing.

Qo'shimcha ma'lumotlar

• React Suspense Hujjatlari
• SWR Hujjatlari
• TanStack Query Hujjatlari
• React 18 E'loni (Concurrent Mode)